<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>普通函数的this与箭头函数的this的区别</title>
    <style>
        div {
            height: 300px;
            width: 300px;
            text-align: center;
            background-color: lightskyblue;
            color: white;
            margin: auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body>
<div>
    <p class="normalP"></p>
    <p class="arrowP"></p>
</div>

<script>
    const normalP = document.querySelector(".normalP")
    const arrowP = document.querySelector(".arrowP")
    let normal = {
        bibi: "哔哔",
        biubiu: function () {
            setTimeout(function () {
                normalP.innerHTML = "普通函数:" + this.bibi;
            }, 10);
        }
    };
    let arrow = {
        bibi: "哔哔",
        biubiu: function () {
            setTimeout(() => {
                arrowP.innerHTML = "箭头函数:" + this.bibi;
            }, 10);
        }
    };
    /*回调函数导致丢失this绑定的现象：当执行栈的任务执行完毕以后才会执行回调函数
    * 这个时候执行回调函数就相当于在全局对象里面执行（也就是window）*/
    normal.biubiu();
    /*箭头函数被普通函数包裹，this绑定了最近一层普通函数的this，也就是绑定到了
    arrow对象。如果没有普通函数包裹，箭头函数的this又要绑定window了*/
    arrow.biubiu();
</script>
</body>
</html>